<template>
    <div class="box_cont topic_cont" style="display: flex; flex-direction: column;" ref="boxfull" v-loading="loading">
        <div class="w-full flex_center_between" style="padding: 1rem 0;">
            <img class="back_img cur" style="filter: brightness(50%);" src="@/assets/img/back.png" @click="backFn" />
            <h5 style="font-size: 3.6rem;">{{article.title}}</h5>
            <div></div>
        </div>
        <div style="padding: 0 3rem; overflow-y: auto; flex: 1;">
            <div class="article-content" style="font-size: 2.5rem;line-height: 4rem;" v-html="article.content"></div>
            <div style="margin-bottom: 20px;">
                <div style="font-size: 2rem; margin-top: 1.3rem;font-weight: bold;">翻译：</div>
                <div style="font-size: 2.5rem;line-height: 4rem;">{{ article.translate }}</div>
            </div>

            <div v-if="article.questions?.length">
                <div style="font-size: 2rem; margin-top: 1.3rem;font-weight: bold;">题目：</div>
                
                <template v-for="(item, index) in article.questions">
                    <div style="padding: 10px; margin-top: 10px;font-size: 1.9rem;">
                        {{ index + 1 }}. {{ item.stem }}
                    </div>
                    
                    <template v-for="answer in item.option">
                        <div style="padding: 10px 0 0 20px; font-size: 1.6rem">{{ answer.prefix }}：{{ answer.content }}</div>
                    </template>

                    <div style="display: flex; padding-left: 20px; margin-top: 10px;">
                        <div style="margin-right: 20px;font-size: 1.6rem">正确答案：{{ item.rightAnswer[0] }}</div>
                    </div>
                    <div style="display: flex; padding-left: 20px; margin-top: 10px;font-size: 1.6rem;padding-bottom: 10px">
                        {{ item.analysis }}
                    </div>
                </template>
            </div>

            <template v-if="phraseItems.length">
                <div style="font-size: 2rem; margin-top: 1.3rem;font-weight: bold;">短语：</div>
                <div v-for="(item, index) in phraseItems" style="padding: 1rem 0;">
                    <div style="display: flex; align-items: center; font-size: 1.9rem;">
                        <div style="margin-right: 10px;">{{index + 1}}.</div>
                        <div style="font-size: 1.6rem;" v-if="item.english">{{item.english}}（{{item.chinese}}）</div>
                        <div style="font-size: 1.6rem;" v-else>无</div>
                    </div>

                    <div style="padding: 10px 0 0 20px; font-size: 1.6rem;">分析：{{item.analysis}}</div>
                    <div style="padding: 10px 0 0 20px; font-size: 1.6rem;" v-for="example in item.examples">例句：{{example}}</div>
                </div>
            </template>

            <template v-if="syntaxItems.length">
                <div style="font-size: 2rem; margin-top: 1.3rem;font-weight: bold;">语法：</div>
                <div v-for="(item, index) in syntaxItems" style="padding: 1rem 0;">
                    <div style="display: flex; align-items: center; font-size: 1.9rem;">
                        <div style="margin-right: 10px;">{{index + 1}}.</div>
                        <div>{{item.name}}</div>
                    </div>
                    <div style="padding: 10px 0 0 20px; font-size: 1.6rem;">例如：{{item.english}}</div>
                    <div style="padding: 10px 0 0 20px; font-size: 1.6rem;">规则变化：{{item.analysis}}</div>
                    <div style="padding: 10px 0 0 20px; font-size: 1.6rem;">巩固例子：{{item.collocation}}</div>
                </div>
            </template>


            <template v-if="Object.keys(wordExampleItems).length">
                <div style="font-size: 2rem; margin-top: 1.3rem;font-weight: bold;">单词：</div>
                <div v-for="(wordExampleItems, word, index) in wordExampleItems" style="padding: 1rem 0;">
                    <div style="display: flex; align-items: center; font-size: 1.9rem;">
                        <div style="margin-right: 10px;">{{index + 1}}.</div>
                        <div>{{word}}</div>
                    </div>
                    <template v-for="(item, _idx) in wordExampleItems">
                        <div v-if="item.type == 3" style="padding: 10px 0 0 20px; font-size: 1.6rem;">例句{{_idx + 1}}：{{item.english}}（{{item.chinese}}）</div>
                        <div v-if="item.type == 4" style="padding: 10px 0 0 20px; font-size: 1.6rem;">语法：{{item.english}}（{{item.chinese}}）</div>
                        <div v-if="item.type == 5" style="padding: 10px 0 0 20px; font-size: 1.6rem;">真题{{_idx + 1}}：{{item.english}}（{{item.chinese}}）</div>
                    </template>
                </div>
            </template>

            <template v-if="Object.keys(articleWordItems).length">
                <div style="font-size: 2rem; margin-top: 1.3rem;font-weight: bold;">单词：</div>
                <div v-for="(word, index) in articleWordItems" style="padding: 1rem 0;">
                    <div style="display: flex; align-items: center; font-size: 1.9rem;">
                        <div style="margin-right: 10px;">{{index + 1}}.</div>
                        <div>{{word.name}}</div>
                    </div>
                    <div style="padding: 10px 0 0 20px; font-size: 1.6rem;">音标：{{ word.soundmark }}</div>
                    <div style="padding: 10px 0 0 20px; font-size: 1.6rem;">释义：{{ word.paraphrase }}</div>
                    <div style="padding: 10px 0 0 20px; font-size: 1.6rem;">派生词：{{ word.derivative }}</div>
                    <div style="padding: 10px 0 0 20px; font-size: 1.6rem;">常见固定搭配：{{ word.collocation }}</div>
                    <template v-for="(item, _idx) in word.examples">
                        <div style="padding: 10px 0 0 20px; font-size: 1.6rem;">例句{{_idx + 1}}：{{item}}</div>
                    </template>
                </div>
            </template>

            <template v-if="tenseExamples.length">
                <div style="font-size: 2rem; margin-top: 1.3rem;font-weight: bold;">时态：</div>
                <div v-for="(item, index) in tenseExamples" style="padding: 1rem 0;">
                    <div style="display: flex; align-items: center; font-size: 1.9rem;">
                        <div style="margin-right: 10px;">{{index + 1}}.</div>
                        <div>{{item.name}}</div>
                    </div>
                    
                    <template v-for="child in item.children">
                        <div style="padding: 10px 0 0 20px; font-size: 1.6rem;">例如：{{child.english}}</div>
                        <div style="padding: 10px 0 0 20px; font-size: 1.6rem;">分析：{{child.analysis}}</div>
                    </template>
                </div>
            </template>

            <template v-if="structureExamples.length">
                <div style="font-size: 2rem; margin-top: 1.3rem;font-weight: bold;">句子结构：</div>
                <div v-for="(item, index) in structureExamples" style="padding: 1rem 0;">
                    <div style="display: flex; align-items: center; font-size: 1.9rem;">
                        <div style="margin-right: 10px;">{{index + 1}}.</div>
                        <div>{{item.name}}</div>
                    </div>

                    <template v-for="child in item.children">
                        <div style="padding: 10px 0 0 20px; font-size: 1.6rem;">{{child.chinese}}</div>
                        <div style="padding: 10px 0 0 20px; font-size: 1.6rem;" v-if="child.english">例句：{{child.english}}</div>
                        <div style="padding: 10px 0 0 20px; font-size: 1.6rem;" v-if="child.analysis">分析：{{child.analysis}}</div>
                    </template>
                </div>
            </template>

        </div>
    </div>
</template>

<script>
import { getArticleParticulars } from '@/api/courseArticle.js'
export default {
    components:{ },
    data() {
        return {
            loading: false,
            exerciseId: 0,
            articleId: 0,
            userId: 0,
            isAi: 0,
            article: {},
            phraseItems: [],
            exampleItems: [],
            syntaxItems: [],
            tenseExamples: [],
            wordExampleItems: [],
            articleWordItems: [],
            structureExamples: []
        }
    },
    created() {
        this.isAi = this.$route.query.isAi || 0
        this.userId = this.$route.query.userId || 0
        this.articleId = this.$route.query.articleId || 0
        this.exerciseId = this.$route.query.exerciseId || 0
    },
    mounted() {
        this.loading = true
        getArticleParticulars(this.articleId).then(res => {
            this.loading = false
            this.article = res.article
            this.syntaxItems = res.syntaxItems
            this.articleWordItems = res.articleWordItems
            // this.exampleItems = res.exampleItems
            this.phraseItems = res.phraseItems
            this.tenseExamples = res.tenseExamples
            this.structureExamples = res.structureExamples
            console.log(JSON.parse(JSON.stringify(this.article)), 'resresres')
        }).catch(() => {
            this.loading = false
        })
    },
    methods:{
        backFn() {
            this.$router.go(-1)
        }
    }
}
</script>

<style lang="scss" scoped>
.back_img{
    width: 4rem;
    height: 4rem;
    margin-right: 1rem;
    margin-left: 1rem;
    &:hover{
        content: url(@/assets/img/back_1.png);
        filter: brightness(100%) !important;
    }
}
</style>
